<template>
    <div>
        <div style="border:1px solid">
            <canvas id="canvas_traw" class="canvas" layoutwidth="500px">
            </canvas>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Play',
    data() {
        return {
        }
    },
    methods: {
    },
    computed: {
    },
    mounted() {
        var canvas = document.querySelector('canvas')
        let ctx
        if (canvas.getContext) {
            ctx = canvas.getContext('2d')
            canvas.height = window.innerHeight * 2
            canvas.width = window.innerWidth * 2
            let video = document.createElement('video')
            console.log('video', video)
            video.src = 'https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8'
            video.type = 'application/x-mpegURL'
            video.play()
            video.preload = "auto"
            console.log('video', video)
            console.log('播放')
            setInterval(() => {
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
            }, 20);
            // })
        } else {
            alert('不支持')
        }

    }
}
</script>
<style scop>
.canvas {
  width: 500px;
  height: 500px;
}

video {
  width: 100%;
  height: 100%;
}

video {
  display: none;
}
</style>